<?xml version="1.0" encoding="utf-8"?>
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

  <title>POP'N</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=us-ascii" />
  <meta name="description" content=
  "'Split Page' 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns." />
  <meta name="keywords" content=
  "'Split Page' 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns." />
  <meta name="robots" content="index, follow" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <style media="screen" type="text/css">
/*<![CDATA[*/
        /* <!-- */
        /* General styles */
        body {
                margin:0;
                padding:0;
                border:0;               /* This removes the border around the viewport in old versions of IE */
                width:100%;
                background:#fff;
                min-width:600px;        /* Minimum width of layout - remove line if not required */
                                        /* The min-width property does not work in old versions of Internet Explorer */
                font-size:90%;
        }
        a {
                color:#369;
        }
        a:hover {
                color:#fff;
                background:#369;
                text-decoration:none;
        }
        h1, h2, h3 {
                margin:.8em 0 .2em 0;
                padding:0;
        }
        p {
                margin:.4em 0 .8em 0;
                padding:0;
        }
        img {
                margin:10px 0 5px;
        }
        /* Header styles */
        #header {
                clear:both;
                float:left;
                width:100%;
        }
        #header {
                border-bottom:1px solid #000;
        }
        #header p,
        #header h1,
        #header h2 {
                padding:.4em 15px 10px 15px;
                margin:0;
        }
        /* column container */
        #mask {
                position:relative;      /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
                clear:both;
                float:left;
                width:100%;                     /* width of whole page */
                overflow:hidden;                /* This chops off any overhanging divs */
                background:#fff;
        }
        #colmid {
                float:left;
                width:200%;
                position:relative;
                left:50%;
                margin-left:-100px;
                background:#f6f;        /* Centre column background colour */
        }
        #colright {
                float:left;
                width:100%;
                position:relative;
                left:200px;             /* Left column width + right column width */
                background:#fff;        /* Left column background colour */
        }
        #col1wrap {
                float:left;
                width:25%;
                position:relative;
                right:25%;
        }
        #col1 {
                margin:0 15px 0 115px;
                position:relative;
                right:200px;
                overflow:hidden;
        }
        #col2wrap {
                float:left;
                width:25%;
                position:relative;
                right:25%;
        }
        #col2 {
                margin:0 15px 0 115px;
                position:relative;
                right:100px;
                overflow:hidden;
        }
        #col3 {
                float:left;
                width:170px;            /* Width of right column content (right column width minus left and right padding) */
                margin-left:-185px;     /* Width of right column right-hand padding + left column left and right padding */
                position:relative;
                right:50%;
        }
        /* Footer styles */
        #footer {
                clear:both;
                float:left;
                width:100%;
                border-top:1px solid #000;
        }
        #footer p {
                padding:10px;
                margin:0;
        }

  /*]]>*/
  </style>
</head>

<body>
  <div id="header">
    <!---
    <div id="content" class="round">



      <% flash.each do |key, value| %>

      <div class="flash &lt;%= key %&gt;">
        <%= value %>
      </div><% end %><%= yield %>
    </div>
--->

    <h1>POP'N</h1>

    <h2>POP'N is a service that allows users to know what is happening
    around them easily and efficiently. POP'N takes a different
    approach from other SNS; an event-centric approach to define the
    network our users are in and how it is shaped.</h2>
  </div>

  <div id="mask">
    <div id="colmid">
      <div id="colright">
        <div id="col1wrap">
          <div id="col1">
            <h2>Sign In</h2>
            <%= link_to "Sign in", "users/sign_in" %>
            <div id="splash_signin">
              <div id="signin">
                <h1 style="height: 13px"><span style=
                "background: white;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px 10px 5px 10px">
                Sign In</span></h1>

                <div style=
                "border-top: 1px solid #dadada; padding: 35px 25px 15px 25px; background: #f6f6f6; margin: 0 0 25px 0;-moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;">
                <form method="post" action="/signin">
                    <input type="hidden" name="redirect_route" id="redirect_route" value=
                    "" /><input type="hidden" name="redirect_onload_focus" id=
                    "redirect_onload_focus" value="" />

                    <table style="margin: auto; width: 370px;">
                      <tr>
                        <td class="c1"><label for="user_username">Username</label></td>

                        <td>
                          <div class="text_input_exterior" style="float: left">
                            <input type="text" name="user[username]" class="text_input"
                            id="user_username" />
                          </div>
                        </td>
                      </tr>

                      <tr>
                        <td class="c1"><label for="user_password">Password</label></td>

                        <td>
                          <div class="text_input_exterior" style="float: left">
                            <input type="password" name="user[password]" class=
                            "text_input" id="user_password" />
                          </div>
                        </td>
                      </tr>

                      <tr>
                        <td colspan="2">
                          <div style="text-align: right; padding-right: 18px">
                            <ul>
                              <li>
                              <%= button_to "Sign In", :action => '/users/sign_in', :id => 'user' %><!--<input type="submit" name="commit" value="Sign In" class="submit_button" />--></li>

                              <li style="padding: 7px 15px 7px 0"><input type="checkbox"
                              name="user[remember_me]" class="checkbox" checked="checked"
                              id="user_remember_me" /> <span id="signin_remember_me_span"
                              onclick="toggle_checkbox('user_remember_me')">Keep me
                              signed in</span></li>
                            </ul>

                            <div style="clear:both"></div>
                          </div>
                        </td>
                      </tr>
                    </table>

                    <p style="margin-top:15px;font-size:1em;color:red">Forgot your
                    password? <a href="/reset_password">Reset it</a>.</p>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="col2wrap">
          <div id="col2">
            <!-- Column 2 start -->

            <h2>Explore Today</h2>

            <div id="user_nav" style="text-align:center;">
              <%= link_to "Sign up", "users/sign_up" %>
            </div>
          </div>
        </div>

        <div id="col3">
          <!-- Column 3 start -->

          <h2>Connect via Other SNS</h2>

          


          <h2>Full cross-browser support</h2>

          <p>The 3 column 'Split Page' liquid-layout has been tested on the following
          browsers:</p>

          <h3>iPhone &amp; iPod Touch</h3>

          <ul>
            <li>Safari</li>
          </ul>

          <h3>Mac</h3>

          <ul>
            <li>Safari</li>

            <li>Firefox</li>

            <li>Opera 9.25</li>
          </ul>

          <h3>Windows</h3>

          <ul>
            <li>Firefox 1.5, 2 &amp; 3</li>

            <li>Safari</li>

            <li>Opera 8.1 &amp; 9</li>

            <li>Explorer 5.5, 6 &amp; 7</li>
          </ul><!-- Column 3 end -->
        </div>
      </div>
    </div>
  </div>

  
  <%= render :partial => "shared/footer" %>
  <!---
  <div id="footer">
    <p>This page uses the <a href=
    "http://matthewjamestaylor.com/blog/split-page-3-column-liquid-layout.htm">'Split
    Page' 3 column CSS liquid-layout</a> by <a href=
    "http://matthewjamestaylor.com">Matthew James Taylor</a>. View more <a href=
    "http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and
    <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
  </div>
  --->
</body>
</html>